<template>
	<view class="pageBox">
		<!--分享2-->
		
		<view class="poster-img-box">
			<image class="poster-img" :src="posterImage" mode="widthFix"></image>
		</view>
		
		
		<view class="footer-box">
			<view class="save-btn" @click="copyCode()">复制邀请码</view>
			
			<view class="btn-line"></view>
			
			<!-- #ifndef H5 -->
			<view class="save-btn" @click="saveImage">
			保存图片
			</view>
			<!-- #endif -->
			
			<!-- #ifdef H5 -->
			<view class="save-btn" @click="saveImage">
			长按图片保存
			</view>
			<!-- #endif -->
			
			
		</view>
		
		<!-- 各海报模块 -->
		<wanl-canvas v-if="showPoster" ref="shoproCanvas" :canvasParams="canvasParams" @success="onSuccess"></wanl-canvas>
		
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
// import Auth from '@/shopro/permission/index.js';
let system = uni.getSystemInfoSync();
	
	
export default {
	components: {
		
	},
	data() {
		return {
			showPoster: false, //海报弹窗
			posterImage: '',
			canvasParams: {},
			userInfo:{},
			QRCodeText:'',
		}
	},
	onLoad() {
		this.loadData();	
	},
	onShow(){
		
	},
	methods: {
		async loadData() {
			await uni.request({
				url: '/user/info',
				method: 'POST',
				success: res => {
					res = res.res;
					if(res.code == 1){
						this.userInfo = res.data;
						this.QRCodeText = this.$store.state.common.appConfig.domain +'/pages/user/auth/register?share_id='+ this.userInfo.code +'&QRtype=user';
						this.onPoster();
					}
				}
			});
		},
		copyCode(){
			uni.setClipboardData({
				data: this.userInfo.code,
				success: function() {
					uni.hideToast();
					
					uni.showToast({
						title: '邀请码复制成功',
						icon: 'none'
					});
				},
				fail: function(err) {
					
				}
			});
		},
		// 绘制成功
		onSuccess(e) {
			console.log("绘制成功");
			this.posterImage = e;
		},
		// 保存图片
		async saveImage() {
			let that = this;
			
			/*#ifdef H5*/
			this.$wanlshop.msg('长按图片保存');
			return false;
			/*#endif*/

			
			// let authState = await new Auth('writePhotosAlbum').check();
			// if (authState) {
				uni.saveImageToPhotosAlbum({
					filePath: that.posterImage,
					success: res => {
						this.$u.toast('保存成功');
						this.showPoster = false;
					},
					fail: err => {
						console.log(`图片保存失败:`, err);
						this.$u.toast('保存失败');
					}
				});
			//}
		},
		// 开始绘制
		onPoster() {
			this.posterImage = '';
			if (this.$store.state.user.isLogin) {
				this.canvasParams = this.getPosterFormatter();
				this.showPoster = true;
			} else {
				this.$wanlshop.to('/pages/user/auth/auth');
			}
			
			this.showShare = false;
		},
		// 获取海报格式,规则说明在@/shopro/poster/tools.js中的initDrawArray
		//https://github.com/fotoke/QS-SharePoster
		getPosterFormatter() {
			console.log("go getPosterFormatter", this.shareInfo);
			
			const that = this;
			let data = {};
			data = {
				background:{
					width:  750,
					height: 1000
				},
				drawArray: [
					{
						name: '用户昵称',
						type: 'text',
						text: that.userInfo.nickname,
						size: 30,
						dx: 240,
						dy: 220,
						color: '#333',
						textAlign: 'left',
						textBaseLine: 'middle',
						fontWeight: 'bold'
					},
					{
						name: '用户ID',
						type: 'text',
						text: '邀请码: '+ that.userInfo.code,
						size: 30,
						dx: 240,
						dy: 270,
						color: '#b0b0b0',
						textAlign: 'left',
						textBaseLine: 'middle',
						fontWeight: 'bold'
					},
					{
						name: 'avatar',
						type: 'image',
						url: that.userInfo.avatar,
						alpha: 1,
						dx: 100,
						dy: 200,
						dWidth: 120,
						dHeight: 120,
						roundRectSet: 20
					},
					// #ifdef MP-WEIXIN
					{
						name: 'wxCode',
						type: 'image',
						url: `${that.$API_URL}wechat/wxacode?scene=${that.shareInfo.query}`,
						alpha: 1,
						dx: 100,
						dy: 380,
						dWidth: 560,
						dHeight: 560
					},
					// #endif
					// #ifndef  MP-WEIXIN
					{
						name: '普通二维码',
						type: 'qrcode',
						text: this.QRCodeText,
						size: 560,
						dx: 100,
						dy: 380,
						//image: `${that.$IMG_URL}/static/images/logo-small.png`,
						background: '#fff', // 背景色
						foreground: '#000', // 前景色
					}
					// #endif
				]
			};
			
			return data;
		}
	}
}
</script>


<style>
page{
	background-color: #ffffff !important;
}	
</style>



<style scoped lang="scss">
.poster-img-box {
	.poster-img {
		width: 750rpx;
		min-height: 800rpx;
		border-radius: 20rpx;
	}
}
	
.footer-box{
	position: fixed;
	bottom: calc(150rpx + env(safe-area-inset-bottom));
	left: 0rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.btn-line{
		width: 2rpx;
		height: 26rpx;
		background-color: #606992;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	
	.save-btn{
		font-size: 26rpx;
		font-weight: 700;
		color: #606992;
	}
}
</style>